<template>
  <div class="announcement-page">
    <main class="main-content">
      <section class="carousel-section">
        <CarouselComponent />
      </section>
      <header class="head">
        <h1>公告与活动</h1>
      </header>
      <!-- Cards Container -->
      <div class="cards-container">

        <div class="card" v-for="item in items" :key="item.id">
          <img :src="item.image" :alt="item.title" class="card-image" />
          <h2 class="card-title">{{ item.title }}</h2>
          <p class="card-description">{{ item.description }}</p>
        </div>
      </div>
    </main>
    <footer class="footer">
      <p>&copy; 2024 学校名称. All rights reserved.</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CarouselComponent from '../components/CarouselComponent.vue';


// 假设的数据
const items = ref([
  {
    id: 1,
    image: 'https://img.rednet.cn/2024/11-08/1731066882980-ls5iax0tluh.png',
    title: '锻造匠心 追求卓越',
    description: '弘扬大国工匠精神和劳模精神，厚植职业精神，为湖南实现“三高四新”美好蓝图做出更大贡献。'
  },
  {
    id: 2,
    image: '/assets/images/huo2.jpg',
    title: '科技创新大赛',
    description: '本年度科技创新大赛报名通道已开启，快来挑战你的创造力吧！'
  },
  {
    id: 3,
    image: '../assets/images/huo3.jpg',
    title: '第一届全国大学生论文比赛',
    description: '第一届全国大学生论文比赛将于2024年12月1日开始报名，欢迎各位同学踊跃参加！'
  },
  {
    id: 4,
    image: '../assets/images/huo3.jpg',
    title: '论文提交截止日期延长',
    description: '由于疫情原因，论文提交截止日期延长至2024年11月30日。'
  },
  {
    id: 5,
    image: 'https://img.rednet.cn/2024/10-28/c48c4d24-6cb3-4d12-8805-99cf10daa513.png',
    title: '科技创新大赛',
    description: '本年度科技创新大赛报名通道已开启，快来挑战你的创造力吧！'
  },
  {
    id: 6,
    image: '../assets/images/huo6.png',
    title: '获奖名单公布',
    description: '第一届全国大学生论文比赛获奖名单已公布，请查看附件。'
  }
]);

</script>

<style scoped>
.announcement-page {
  font-family: Arial, sans-serif;
  color: #333;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}


.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.carousel-section {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.announcements-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.announcements-section h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #007bff;
}

.announcements-list {
  list-style-type: none;
  padding: 0;
}

.announcement-item {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 5px;
  transition: transform 0.3s ease-in-out;
}

.announcement-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.announcement-item h3 {
  font-size: 1.2rem;
  margin-top: 0;
  color: #007bff;
}

.announcement-item p {
  margin-top: 10px;
  color: #666;
}

.footer {
  text-align: center;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.head {
  text-align: center;
  margin-bottom: 20px;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: calc(33.333% - 20px);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-10px);
}

.card-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-title {
  font-size: 1.2em;
  margin: 10px 0;
  padding: 0 10px;
}

.card-description {
  padding: 0 10px 10px;
  color: #666;
}
</style>
